<extend name="public@:index_basics" />
<block name="body">

<link href="__DK__/css/main.css" rel="stylesheet">
<link href="__DK__/css/responsive.css" rel="stylesheet">
<include file="public@:head"/>
<style>
	@media only screen and (max-width: 768px){
	.pay_box{
		margin:0;
		border: 1px solid #00aeef;
    width: 96%;
    padding: 10px;
    margin: 10px 2%;
    border-radius: 5px;
    -moz-box-shadow:0px 0px 5px #919191; -webkit-box-shadow:0px 0px 5px #919191; box-shadow:0px 0px 5px #919191;
	}
	.pay_box table select{
        width: 100% !important;
    height: 30px !important;
    padding: 0 5px !important;
    font-size: 14px !important;
    border: none;
    text-align: right;
    
    }
    .pay_box table td{
    	padding: 10px;
     }
     .phone_num{
     	margin-bottom: 5px;
     }
     .hdhdtfh tr{
     	border-bottom: 1px solid #dddddd;
     }
     .phone_num{
     	width: 100% !important;
     	height: 30px !important;
    padding: 0 5px !important;
    font-size: 14px !important;
    border: none !important;
     }
     .gghdg{
     	display: none;
     }
     
    }
</style>
<!--/#header-->
<div class="ddgm" id="vue" v-block>
    <form action="" method="post" id="add-order">
        <input type="hidden" name="return_url" id="return_url">
        <input type="hidden" name="shop_name" value="{$shop_info.id}">
        <div class="ddgm1">
            <!--<div class="con_box1">
                <div class="gg_title">商家公告</div>
                <div class="gg_con ">
                    <p>2018年12月30日系统自动结算已完毕<img src="images/news.gif"><span>2018-12-31</span></p>
                </div>
                <div id="clear"></div>
                <span class="shadow1"></span>
                <span class="shadow2"></span>
                <span class="line2"></span>
            </div>-->
            <div class="pay_box">
               <!-- <div class="num1"></div>-->
                <div class="title21">
                    <p>选择商品</p>
                    <p class="xzspx"></p>
                </div>
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tbody class="hdhdtfh">
                    <tr>
                        <th scope="row">商品分类</th>
                        <td style="position: relative">
                            <select name="goods_type" @change="get_goods" v-model="goods_type" dir="rtl" style="    font-size: 16px;">
                                <option value="">请选择分类</option>
                                <volist name="goods_type" id="vo">
                                    <option value="{$vo.id}">{$vo.name}</option>
                                </volist>
                            </select>
                            <!--分类名称-->
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">商品名称</th>
                        <td style="position: relative">
                            <select name="goods_id" v-model="goods_id"  id="goodlist" style="font-size:16px" >
                                <option value="">请选择商品</option>
                                <option v-for="vo in goods_list" :value="vo.g_id">{{vo.g_name}}</option>
                            </select>
                            <!--商品名称-->
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">商品单价</th>
                        <td>
                            <span class="big_text" id="price">{{sum_money}}</span> 元
                            <div id="discount_html" style="display: none">
                                <div class="txt">
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">购买数量</th>
                        <td><input v-model="goods_count" id="quantity" name="quantity" type="number" ></td>
                    </tr>
                    <tr>
                        <th scope="row">剩余库存</th>
                        <td><span id="kucun">{{maxNumber}}个</span></td>
                    </tr>
                    <tr>
                        <th scope="row">联系方式</th>
                        <td><input name="contact" value="" class="phone_num" type="text" placeholder="填写必须为真实QQ或邮箱或手机号">
                            <span class="gghdg">✲此联系方式为查询订单的
                            <font color="red">重要凭证</font>
                            </span>
                        </td>
                    </tr>
                    <tr class="email_show" style="display:none">
                        <th scope="row">邮箱地址</th>
                        <td><input type="text" name="email" placeholder="填写你常用的邮箱地址"></td>
                    </tr>
                    <tr class="youhui_show" style="display:none">
                        <th scope="row">优惠券</th>
                        <td><input type="text" name="coupon" placeholder="请输入您的优惠券"></td>
                    </tr>
                    </tbody>
                </table>
                <div class="tip">
                    <p><strong>商品说明</strong>：<span id="remark"></span></p>
                </div>
                <div class="ewm_box">
                    <div id="ma">

                    </div>
                    <br>使用手机扫描二维码购买
                </div>
            </div>
            <div class="pay_box">
                <strong>应付总额</strong>： <span class="price" id="shouldPay">{{sum_money*goods_count}}</span> 元
            </div>
            <div class="pay_box">
                <div class="num2"></div>
                <div class="title21">
                    <p>选择支付方式</p>
                    <p class="xzspx"></p>
                </div>
                <table width="100%" border="0" cellspacing="10" cellpadding="0">
                    <tbody>
                    <tr class="pay_list1">
                        <th scope="row" valign="top"><br><br>付款平台</th>
                        <td>
                            <volist name="pay_all_type" id="vo">
                                <label class="lab3">
                                    <input name="saomaType" value="{$vo.alias}" type="radio">
                                    <img src="{$vo.img}" width="142" height="42">
                                </label>
                            </volist>

                        </td>
                    </tr>
                    </tbody>
                </table>
                <div id="clear"></div>
                <button class="check_pay" id="orderButton">确认支付</button>
            </div>
        </div>
    </form>
</div>
<include file="public@:footer">
    <!--/#footer-->
    <!--<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>-->
    <script src="__STATIC__/js/jquery.qrcode.min.js"></script>
    <link rel="stylesheet" href="__STATIC__/js/loading/css/loading.css">
    <script src="__STATIC__/js/loading/js/loading.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
        $(function () {
            var vue = new Vue({
                el:'#vue'
                ,data:function () {
                    return {
                        goods_type:''
                        ,user_id:"{$shop_info.id}"
                        ,goods_list:[]
                        ,goods_id:''
                        ,sum_money:0
                        ,goods_count:1
                        ,maxNumber:0
                    }
                }
                ,methods:{
                    get_goods:function () {
                       if(this.goods_type != ''){
                           $('body').loading({
                               title:'获取产品中，请等待...',
                               discription:'',
                               name:'get_goods'
                           })
                           vue.goods_id = '';
                           vue.goods_list = [];
                           $.post("{:cmf_url('getGoods')}",{goods_type:this.goods_type,user_id:this.user_id},function (da) {
                               // removeLoading('jia_zai');
                               vue.goods_list = da.data;
                               removeLoading('get_goods');
                           })
                       }else{
                           vue.goods_id = '';
                           vue.goods_list = [];

                       }
                    }
                }
                ,watch:{
                    goods_id:function (new_val) {

                        //获取商品价格
                        if(new_val != ''){
                            vue.maxNumber = '计算中...';
                            //异步获取库存

                            $.post('{:cmf_url("getNumber")}',{goods_id:new_val},function (da) {
                                console.log(da);
                                vue.maxNumber = da.data.count;


                            });

                            //获取价格
                            $(this.goods_list).each(function (i,n) {
                                if(n.g_id == vue.goods_id){
                                    console.log('计算后的价格：'+n.basics_money+n.money)
                                    vue.sum_money = parseFloat(n.basics_money)+parseFloat(n.money)
                                    vue.sum_money = vue.sum_money.toFixed(2);
                                }
                            })
                        }else{
                            vue.sum_money = 0;
                            vue.maxNumber = 0;
                        }
                    }

                }

            });

            //显示二维码
            $('#ma').qrcode({width:250,height:250,text:'http://{$location_this}'});

            //选中支付
            $('.pay_list1 .lab3').click(function () {
                $('.pay_list1 .lab3').removeClass('checked1')
                $(this).addClass('checked1');
            });

            //异步提交
            $('#add-order').submit(function () {
                $('body').loading({
                    title:'获取订单中，请等待',
                    discription:'',
                    name:'add_order'
                })
                $('#return_url').val(location.href);
                $.post('{:cmf_url("addOrder")}',$(this).serialize(),function (da) {
                    var orderInfo = da;
                    removeLoading('add_order');
                    console.log(da);
                    if(da.code == 0){
                        sweetAlert(da.msg,'下单提示','error')
                    }else{
                        swal({
                            title: '4秒自动调转',
                            text: '支付成功，页面没有跳转，请手动查询订单。',
                            timer: 4000
                        }).then(
                            function () {

                                location.href = da.url;
                            }
                        )

                    }

                });

                return false;
            })
        })

        function check(){
            var userAgentInfo=navigator.userAgent;
            var Agents =new Array("Android","iPhone","SymbianOS","Windows Phone","iPad","iPod");
            var flag=true;
            for(var v=0;v<Agents.length;v++) {
                if(userAgentInfo.indexOf(Agents[v])>0) {
                    flag=false;
                    break;
                }
            }
            return flag;
        }


    </script>


</block>